<script setup lang="ts">
import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { TabPane, Tabs } from 'ant-design-vue';

import NeedPurchaseTag from './NeedPurchaseTag/NeedPurchaseTag.vue';
import ReturnMaterialData from './ReturnMaterialData/ReturnMaterial.vue';
import SendMaterial from './sendMaterial/SendMaterial.vue';
import processPurchaseList from './ToProcessPurchaseList/processPurchaseList.vue';
import ToPurchaseListTag from './ToPurchaseListTag/ToPurchaseListTag.vue';

const activeName = ref('1');
const info = ref('');

const [Modal, modalApi] = useVbenModal({
  class: 'w-[95%] h-[100%]',
  appendToMain: true,
  showConfirmButton: false,
  cancelText: '关闭',
  onCancel() {
    modalApi.close();
  },
  async onConfirm() {},
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return;
    const { data } = modalApi.getData<Record<string, any>>();
    formData.value = data;
    info.value = data;
  },
});

// 用于存储从modalApi获取的数据
const formData = ref<any>(null);
</script>

<template>
  <Modal>
    <template #title>
      物料工作台:
     <template v-if="info.template_no">{{ info.template_no+'/' }}</template>
      <template v-if="info.SupplyNa">{{ info.SupplyNa+'/' }}</template>
      <template v-if="info.gpTypeText">{{ info.gpTypeText+'/' }}</template>
      <template v-if="info.plan_total_num">{{ info.plan_total_num+'件' }}</template>
    </template>
    <Page>
      <Tabs v-model:active-key="activeName">
        <TabPane key="1" tab="物料情况总理">
          <NeedPurchaseTag v-if="activeName === '1'" :data="formData" />
        </TabPane>
        <TabPane key="2" tab="物料采购下单">
          <ToPurchaseListTag v-if="activeName === '2'" :data="formData" />
        </TabPane>
        <TabPane key="3" tab="工序采购下单">
          <processPurchaseList v-if="activeName === '3'" :data="formData" />
        </TabPane>
        <TabPane key="4" tab="生产发料">
          <SendMaterial v-if="activeName === '4'" :data="formData" />
        </TabPane>
        <TabPane key="5" tab="生产退料">
          <ReturnMaterialData v-if="activeName === '5'" :data="formData" />
        </TabPane>
      </Tabs>
    </Page>
  </Modal>
</template>

<style scoped></style>
